<template>
    <div class="search">
        <van-search
            :value="searchValue"
            label=" "
            placeholder="搜索热门模版"
            use-action-slot
            @change="onChange"
        >
            <div slot="action" @click="onSearch">搜索</div>
        </van-search>
        <div class="search-wrapper" v-show="!isSearchClosed">
            <div class="search-list">
                <div class="title">最近搜索</div>
                <div class="tags-list">
                    <div class="tag-item" @click="handleCheckedTag(item.name)" v-for="item in historyList" :key="item.id">{{ item.name }}</div>
                </div>
            </div>
<!--            <div class="search-list">-->
<!--                <div class="title">热门搜索</div>-->
<!--                <div class="tags-list">-->
<!--                    <div class="tag-item" v-for="item in hotList" :key="item.id">{{ item.name }}</div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
        <div class="home__cards" v-show="isSearchClosed">
            <scroll-view
                v-show="isSearchClosed"
                style="height: 100%"
                scroll-y="true"
                @scrolltolower="handleScrolltolower">
                <div class="home__cards-view">
                    <div class="home__cards-item" :style="{ marginRight: item.marginRight }" v-for="item in dataList" :key="item.id"
                         @click="handleCheckCard(item)">
                        <div class="img-box">
                            <img :style="{ width: item.width, height: item.height }" :src="item.coverUrl" alt="">
                        </div>
                        <p>{{ item.name }}</p>
                    </div>
                </div>
                <div style="text-align: center;line-height: 18px;margin-top: 10px;margin-bottom: 10px;color: rgba(31, 34, 45, 0.54);font-size: 14px">
                    {{ loadingText() }}
                </div>
            </scroll-view>
    
        </div>
    
<!--        <div class="search-res-box" v-show="isSearchClosed">-->
<!--            <scroll-view-->
<!--                style="height: 100%;background-color: #FFFFFF"-->
<!--                scroll-y="true"-->
<!--                @scrolltolower="handleScrolltolower">-->
<!--                <div class="search-res">-->
<!--                    <div @click="handleCheckCard(item)" class="search-res-item" v-for="item in dataList" :key="item.id">-->
<!--                       -->
<!--                            <van-image-->
<!--                                width="100%"-->
<!--                                height="240"-->
<!--                                :src="item.coverUrl"-->
<!--                            />-->
<!--                        <div class="text">{{ item.name }}</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div style="text-align: center;line-height: 36px;color: rgba(31, 34, 45, 0.54);font-size: 14px">-->
<!--                    {{ loadingText() }}-->
<!--                </div>-->
<!--            </scroll-view>-->
<!--            -->
<!--        </div>-->
    </div>
</template>

<script>
import { searchRequest} from "@/api";

export default {
    name: "search",
    data() {
        return {
            searchValue: '',
            dataList: [
            ],
            pageNo: 1,
            pageSize: 20,
            total: 0,
            historyList: [],
            hotList: [],
            isSearchClosed: false
        }
    },
    onLoad() {
        searchRequest.history().then(res => {
            this.historyList = res.data.map((el,index) => {
                return {
                    id: index,
                    name: el
                }
            })
        })
    },
    methods: {
        onChange(value) {
            console.log(value)
            this.searchValue =  value.detail
            this.isSearchClosed = false
        },
        handleCheckedTag(value) {
            console.log('嗒哒的')
            this.searchValue = value
            this.onSearch()
        },
        onSearch() {
            this.pageNo = 1
            this.dataList = []
            this.getPageList()
        },
        getPageList() {
            searchRequest.search({ nameKeyword: this.searchValue, pageNo: this.pageNo, pageSize: this.pageSize }).then(res => {
                const systemInfo = wx.getStorageSync('systemInfo')
                const width = (systemInfo.screenWidth - 85) / 2
                const height = width * 1.48
                res.data = res.data.map((el,index) => {
                    return {
                        ...el,
                        width: width + 'px',
                        height: height + 'px',
                        marginRight: index % 2 === 0 ? '10px' : 0
                    }
                })
                this.dataList = [...this.dataList, ...res.data]
                this.total = res.data.total || 0
                
                this.isSearchClosed = true
            })
        },
        //  滚动到底部触发加载更多数据
        handleScrolltolower() {
            let len = this.dataList.length
            if(len >= this.total) {
                return
            }
            this.pageNo += 1
            this.getPageList()
        },
        loadingText() {
            if (this.historyList.length < this.total) {
                return '加载中'
            } else {
                return  '没有更多数据了！'
            }
        },
        handleCheckCard(item) {
            uni.navigateTo({
                url: `/pages/desgin/create?templateCardId=${item.id}&templateCardImageUrl=${item.coverUrl}&title=${item.name}`,
            })
        },
    }
}
</script>

<style lang="less">
.search {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: rgb(245,245,245) !important;
    .search-wrapper {
        padding: 12px 16px;
    }
    .search-list {
        .title {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #444444;
            line-height: 20px;
            margin-bottom: 12px;
        }
        .tags-list {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .tag-item {
                min-width: 60px;
                text-align: center;
                padding: 0 8px;
                height: 28px;
                background: #FFFFFF;
                border-radius: 14px;
                line-height: 28px;
                margin: 0 3px;
                margin-bottom: 10px;
            }
        }
    }
    .home__cards {
        flex-grow: 1;
        padding: 16px;
        padding-top: 0;
        overflow: hidden;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        &-view {
            display: flex;
            flex-wrap: wrap;
        }
        &-item {
            margin-top: 10px;
            margin-right: 5px;
            background-color: #FFFFFF;
            border-radius: 6px;
            overflow: hidden;
            padding: 10px;
            p {
                margin: 8px 0 0 8px;
                height: 20px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #1F222D;
                line-height: 20px;
            }
        }
    }
    
    .search-res-box {
        flex-grow: 1;
        overflow: hidden;
    }
    .search-res {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 16px;
        .search-res-item {
            width: 49%;
            overflow: hidden;
            flex-shrink: 0;
            .van-image__img {
                border-radius: 4px;
                overflow: hidden;
            }
            .text {
                height: 18px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #1F222D;
                line-height: 18px;
                padding: 8px 4px 20px 4px;
            }
        }
    }
    
}
</style>